<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../sub3/mycss.css" />
		<link   rel="stylesheet" href="../css/layui.css"/>
	</head>

	<style>
		.Mfile {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid red;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: red;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.Mfile input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.Mfile:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

#thelist{
	position: relative;
	float: left;
	width: 100%;
	height: 250px;
}

video{
	position: relative;
	width: 100%;
	height: 100%;
}
	.shipin{
		position: relative;
		float: left;
		width: 100%;
		    background: #ffffff;
		padding:  0  15px;
		box-sizing: border-box;
		margin-top: 30px;
	}
.shipin>textarea{
	border: none;
	width: 100%;
	height: 150px;
	resize: none;
	font-size:16px;
font-weight:500;
color:rgba(153,153,153,1);
}

.huqueren{
	position: relative;
	margin-top: 20px;
	display: inline-block;
	
}
</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的视频动态</h1>
		</header>
		<div class="mui-content">
		<!-- 进度条 -->
		<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
		  <div class="layui-progress-bar" lay-percent="0%"></div>
		</div>
					
			
          
         	<div class="shipin">
           <textarea  id="ssss" rows="5"  placeholder="这一刻的想法..."  style="resize:none;"   autofocus=""></textarea>
         </div>


			<div class="shipin">
				<div id="uploader" class="wu-example">
					<!--用来存放文件信息-->
					<div id="thelist" style="display:none ;">
						<video autoplay="autoplay" controls="controls"  poster="" >
							<!-- <source src="../image/banner.png" codecs="avc1.4D401E, mp4a.40.2"'> -->
                       </video>	
					</div>
				    <div class="btns Mfile">
						<input type="file" name='file'>选择视频
						<input type="hidden" name="videos" value=""/>
							<!-- <div id="picker" >选择视频</div> -->
							<!-- 	 <button id="ctlBtn" class="btn btn-default">开始上传</button> -->
					</div>
				</div>
			</div>
			<div class="huqueren"> <button type="button" class="mui-btnss">发布动态</button></div>
		</div>
		</div>
	</body>
	<script src="../js/jquery-2.1.4.min.js"></script>
	<script src="../js/webuploader.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
	<script src="../maowenke/ChaJian.js"></script>
		<script src="../js/layui.all.js"></script>
	<script>
		mui.plusReady(function() {
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			user = JSON.parse(user);
				var element = '';
			layui.use('element', function(){
					  element = layui.element;
				});
			// mui.alert('发布视频动态');
						   // 上传动画
			$("[name=file]").click(function() {
								setTimeout(function(){
			     $("#vid").css("opacity","1");
			     },6000)
			     })
			
			
			$("[name=file]").change(function() {
				plus.nativeUI.showWaiting();
				ChaJian.fenpianFile($(this), url + '/juyou/myfile/fenpianfile', function(quanbu) {
					// console.log(quanbu)
				}, function(yige) {
					// mui.alert(JSON.stringify(yige));
				   $("[name=videos]").val(yige.id);
				var ssd='100%'
				  element.progress('demo',ssd);
				}, function(yipian) {
			plus.nativeUI.closeWaiting();
			var ssd=0;	
			var ss=parseInt((yipian.index/yipian.number)*100);
			if(ss==100){
				ssd=99+"%"
			}else{
				ssd=ss+"%"
			}
			  element.progress('demo',ssd);
						
				})
			})
			
			
			//发布视频动态
			mui('.huqueren').on('tap','.mui-btnss',function(){
				$(this).focus();
				var dir = $("#ssss").val();
				if(!dir){
					mui.toast('请输入你的想法');
					return;
				}
				var videos = $("[name=videos]").val();
				plus.nativeUI.showWaiting();
				mui.post(url+'/juyou/Jiaoyou/adddongtaivideo',{token:user.token,dir:dir,videos:videos},function(res){
					plus.nativeUI.closeWaiting();
					if(res.code==200){
						mui.toast(res.msg);
						setTimeout(function(){
							mui.back();
						},1000);
					}else if(res.code==206){
						mui.toast(res.msg);
						setTimeout(function(){
							mui.openWindow({
								url:'huchongzhi.html',
								id:'huchongzhi.html'
							})
						},1500)
					}
					else{
						mui.toast(res.msg);
					}
				})
			})
					
			 // 上传视频封面图方法
			function  shangchuantouxiang(path,func){
						  plus.nativeUI.showWaiting();
						  var  image =new  Image();
						  image.src=path;
						  image.onload=function(){
							  	var imgData=getBase64Image(image); 
								  	mui.ajax(url+'/juyou/index/upimgs',{
								data:{
									file:imgData
								},
								dataType:'json',//服务器返回json格式数据
								type:'post',//HTTP请求类型
								timeout:10000,//超时时间设置为10秒；
								success:function(data){
								// mui.alert("头像上传成功")
										plus.nativeUI.closeWaiting()
										if(func){
											func(data)
										}
								},
								error:function(data){
									mui.alert("头像上传失败")
								}
							});  
						  }
			}
					
					
		})

	</script>
</html>
